<template>
    <el-row>
        <el-col :span="16" class="l-content">
            <el-card shadow="hover" class="uploadFile">
                <file-pond name="file" ref="pond" class-name="my-pond" label-idle="将文件拖放到此处..." allow-multiple="true"
                    accepted-file-types="text/csv" :server="`http://localhost:5000/upload/${this.user_id}`"
                    v-on:processfile="handleFileAdd" />
            </el-card>

            <el-card shadow="hover" class="table">
                <div class="header">
                    <span class="tableTitle el-icon-document"> 文件列表</span>

                    <button class="button-apply" type="button" @click="fetchDataFromBackend">刷新</button>
                    <!-- <button class="button_download" type="button" @click="fetchDataFromBackend">
                        <span class="button__text">刷新</span>
                        <span class="button__icon el-icon-refresh" style="color:#fff;">
                        </span>
                    </button> -->
                </div>

                <div class="table_data">
                    <vxe-table round border=inner align="center" stripe :scroll-y="{ enabled: false }"
                        :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                        :loading="table_loading"
                        :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' }" height="360"
                        :row-config="{ isCurrent: true, isHover: true }" empty-text="暂无数据"
                        :headerCellStyle="{ backgroundColor: '#209978', color: '#fff' }" style="width: 100%">
                        <vxe-column type="seq" title="序号" width="60">
                        </vxe-column>
                        <vxe-column title="文件名" field="name">
                        </vxe-column>
                        <vxe-column title="大小" field="size">
                        </vxe-column>
                        <vxe-column>
                            <template slot="header" slot-scope="scope">
                                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                            </template>

                            <template slot-scope="scope">
                                <div class="button_container">
                                    <button class="button_download" type="button"
                                        @click="handleImport(scope.$index, scope.row)" :disabled="unactionable">
                                        <span class="button__text">处理</span>
                                        <span class="button__icon el-icon-share" style="color:#fff;">
                                        </span>
                                    </button>



                                    <button class="button_download" type="button"
                                        @click="handleDownload(scope.$index, scope.row)" :disabled="unactionable">
                                        <span class="button__text">下载</span>
                                        <span class="button__icon el-icon-download" style="color:#fff;">
                                        </span>
                                    </button>


                                    <button class="button_download delete_button" type="button"
                                        @click="handleDelete(scope.$index, scope.row)" :disabled="unactionable">
                                        <span class="button__text">删除</span>
                                        <span class="button__icon el-icon-delete" style="color: #fff;
                        background-color: #a04545;">
                                        </span>
                                    </button>
                                </div>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>

            </el-card>

        </el-col>
        <el-col :span="8" class="r-content">
            <el-row>
                <el-card shadow="hover" class="processed-data">
                    <div class="r-content-header">
                        <div class="r-content-title el-icon-coin">
                            数据集列表
                        </div>
                        <div style="display: flex; justify-content: space-between;">
                            <button class="button-apply" type="button" @click="sendPFtoSystem()"
                                style="margin-right: 10px;">
                                导入数据集
                            </button>
                            <button class="button-apply delete" type="button" @click="deletePF()">删除数据集</button>
                        </div>
                    </div>

                    <vxe-table round border=inner stripe align="center" show-overflow :loading="pf_loading"
                        :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' }" height="280"
                        :row-config="{ isCurrent: true, isHover: true }" :data="processedData"
                        :headerCellStyle="{ backgroundColor: '#209978', color: '#fff' }" ref="processedData"
                        :checkbox-config="{ labelField: 'id', highlight: true, checkMethod: isLoading }">

                        <vxe-column type="checkbox" title="id" width="80"></vxe-column>

                        <vxe-column title="数据集" field="filename">
                        </vxe-column>

                        <vxe-column title="条目数量(/条)">
                            <template slot-scope="scope">
                                <span v-if="scope.row.size === 'loading'">
                                    <div class="loader"></div>
                                </span>
                                <span v-else>{{ scope.row.size }}</span>
                            </template>
                        </vxe-column>

                    </vxe-table>
                </el-card>
            </el-row>

            <el-row>
                <el-card shadow="hover" class="imported-data">
                    <div class="r-content-header">
                        <div class="r-content-title el-icon-coin">
                            已导入数据集
                        </div>
                        <button class="button-apply delete" type="button" @click="deletePFFromSystem()">
                            剔除数据集
                        </button>
                    </div>

                    <vxe-table round border=inner stripe align="center" show-overflow :loading="id_loading"
                        :loading-config="{ icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...' }" height="240"
                        :row-config="{ isCurrent: true, isHover: true }" :data="importedData"
                        :headerCellStyle="{ backgroundColor: '#209978', color: '#fff' }" ref="importedData"
                        :checkbox-config="{ labelField: 'id', highlight: true }">

                        <vxe-column type="checkbox" title="id" width="80"></vxe-column>

                        <vxe-column title="数据集" field="filename">
                        </vxe-column>

                        <vxe-column title="条目数量(/条)">
                            <template slot-scope="scope">
                                <span v-if="scope.row.size === 'loading'">
                                    <div class="loader"></div>
                                </span>
                                <span v-else>{{ scope.row.size }}</span>
                            </template>
                        </vxe-column>

                    </vxe-table>
                </el-card>
            </el-row>
        </el-col>
    </el-row>
</template>

<script>
import _import from '@/webManage/js/main/import/import.js';
export default _import;
</script>

<style lang="less" scoped>
@import url('../../style/button/button_download.css');
@import url('../../style/apply/apply1.css');
@import url('../../style/loader/loader-pf.css');

.l-content {

    .uploadFile {
        margin-right: 20px;
        height: 30vh;
        max-height: 250px;
        /* 设置最大高度 */
        overflow-y: auto;
        /* 启用纵向滚动条 */
        padding: 10px;
    }

    .table {
        margin-top: 20px;
        margin-right: 20px;
        height: 55vh;

        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 10px;
            margin-bottom: 15px;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);

            .tableTitle {
                font-weight: 700;
            }
        }

        .table_data {

            .block {
                padding-top: 15px;
                float: right;
            }

            .progress {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                width: 100%;
            }

            .button_container {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-top: 10px;

                .delete_button {
                    background-color: #f56c6c;
                    border-color: #662121;

                    :hover {
                        background-color: #662121;
                    }
                }
            }
        }
    }
}

.r-content {
    .r-content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;

        .r-content-title {
            font-weight: 700;
        }
    }

    .imported-data {
        height: 40vh;
    }

    .delete {
        background-color: #f56c6c;
    }

    .processed-data {
        height: 45vh;
        // padding-bottom: 13px;
        margin-bottom: 20px;
    }
}

.button-apply {
    height: 32px;
    font-size: 12px;
}

.loader {
    position: absolute;
    left: 40px;
    top: 20px;
}
</style>

<style>
.processed-data .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,
.imported-data .vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon {
    color: #41dcb3;
}

.processed-data .vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,
.imported-data .vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon {
    color: #41dcb3;
}
</style>